import React from 'react';
import {Layout, Icon, Input, Badge, Menu} from 'antd';
import './HeaderCustom1.less';


const {Header} = Layout;
const SubMenu = Menu.SubMenu;
const colors = [
  {title: '浅蓝', color: 'blue'},
  {title: '绿色', color: 'green'},
  {title: '红色', color: 'red'},
];

export default class HeaderCustom1 extends React.Component {

  state = {
    value: '',
    userName: this.props.userName ? this.props.userName : null,

  }

  onChange = (e) => {
    const {value} = e.target;
    this.setState({
      value: value,
    })
  }

  onPressEnter = () => {
    this.state.value && this.props.onPressEnter && this.props.onPressEnter(this.state.value)
  }

  onPressBell = () => {
    this.props.onPressBell && this.props.onPressBell();
  }

  onPressHelp = () => {
    this.props.onPressHelp && this.props.onPressHelp();
  }

  menuClick = (e) => {
    switch (e.key) {
      case 'change':
        console.log('change')
        break;
      case 'logout':
        console.log('logout')

        break;
      case 'bell':
        console.log('bell')

        this.onPressBell();
        break;
      case 'help':
        console.log('help')

        this.onPressHelp();
        break;
      case 'blue':
        console.log('blue')
        break;
      case 'green':
        console.log('green')
        break;
      case 'red':
        console.log('red')
        break;
    }
  }

  render() {
    return (
      <div className="header-container flex-box flex-center">
        <div className=" flex-box flex-center header-right">
          <img className="header-img"
               src="https://sg-file-test.oss-cn-beijing.aliyuncs.com/mobilemall-admin-web/picmanagecontroller/image/2018/08/3d08901b9e1840ef9f3718f62dbd9f23.png"/>
          <div className="header-border"/>
          <span className="header-title-span">政府采购云平台</span>
          <span>采购云版</span>
        </div>

        <div className="flex-box  flex-center  header-left">
          <Input
            onChange={this.onChange}
            onPressEnter={this.onPressEnter}
            placeholder="可检索功能模块 / 条目 / 帮助" suffix={<Icon type="search" className="certain-category-icon"/>}/>


          <Menu
            className="left-container"
            mode="horizontal"
            style={{lineHeight: '64px', float: 'right'}}
            onClick={this.menuClick}
          >
            <SubMenu title={<span>{this.state.userName ? `欢迎您  ${this.state.userName}` : '未登录'}</span>}>
              <Menu.Item key="change">修改密码</Menu.Item>
              <Menu.Item key="logout">退出</Menu.Item>
            </SubMenu>
          </Menu>

          <Menu
            className="left-container"
            mode="horizontal"
            style={{lineHeight: '64px', float: 'right'}}
            onClick={this.menuClick}
          >

            <Menu.Item key="bell">
              <Badge
                count={10}>
                <Icon type="bell" theme="outlined"/>
              </Badge>
            </Menu.Item>
            <Menu.Item key="help">
              <Icon type="question-circle" theme="outlined"/>
            </Menu.Item>
            <SubMenu title={<Icon type="skin" theme="outlined"/>}>
              {
                colors.map((item, index) => {
                  return (<Menu.Item key={item.color}>{item.title}</Menu.Item>)
                })
              }
            </SubMenu>
          </Menu>
        </div>
      </div>
    )
  }
}
